<template>
	<view class="content">
		<!-- 轮播图布局 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in bannerList" :key="item.bannerid">
				<image :src="item.img" mode=""></image>
			</swiper-item>
		</swiper>
		
		<!-- 宫格布局 -->
		<u-grid class="gridBox" :col="5">
			<u-grid-item v-for="item in navList" :key="item.navid">
				<u-icon class="grid-icon" size="40" :name="item.imgurl"></u-icon>
				<text class="grid-text">{{item.title}}</text>
			</u-grid-item>
		</u-grid>
		
		<!-- 商品数据渲染 -->
		<u-cell-group>
			<u-cell 
			v-for="item in proList"
			:key="item.proid" 
			:title="item.proname"
			@click="goDetail(item.proid)"
			>
				<u-avatar size='60' shape='square' slot='icon' :src="item.img1"></u-avatar>
			</u-cell>
		</u-cell-group>
		
		<view v-show="scrollTop > 300" @click="goTop" class="backTop">
			<u-icon name="arrow-upward" size='30'></u-icon>
		</view>
		
	</view>
</template>

<script>
	import {getBannerList,getNavList,getProList} from '../../api/home.js'
	export default {
		data() {
			return {
				bannerList: [],
				navList: getNavList(),
				proList: [],
				count: 2,
				scrollTop: 0
			}
		},
		onPullDownRefresh() {
			getProList().then(res => {
				this.proList = res.data
				this.count = 2
				// 关闭下拉加载的图标
				uni.stopPullDownRefresh()
			})
		},
		onPageScroll({scrollTop}) {
			this.scrollTop = scrollTop
		},
		onReachBottom() {
			getProList({count: this.count}).then(res => {
				if(res.data.length <= 0){
					// 没有更多
					uni.showToast({
						title:'没有更多内容了'
					})
				}else {
					// 有更多数据
					this.proList = [...this.proList, ...res.data]
					this.count++
				}
			})
		},
		mounted() {
			getBannerList().then(res => {
				console.log(res.data);
				this.bannerList = res.data
			})
			
				
			getProList().then(res => {
				this.proList = res.data
			})
		},
		methods: {
			goTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			goDetail(proid){
				console.log(proid);
				uni.navigateTo({
					url: '/pages/detail/detail?proid=' + proid,
					success(res) {
						res.eventChannel.emit('proid',{proid,name: '花花', age: 18})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
swiper {
	width: 100%;
	height: 200px;
	image {
		width: 100%;
	}
}
.gridBox {
	padding: 10px;
	.grid-text {
		font-size: 14px;
	}
	.grid-icon {
		padding-top: 16px;
	}
}
.backTop {
	position: fixed;
	bottom: 60px;
	right: 10px;
	width: 36px;
	height: 36px;
	border: 1px solid #000;
	border-radius: 50%;
	box-sizing: border-box;
	padding: 2px;
	background-color: white;
}
</style>
